<template>
	<view class="box" :class="{active:isActive}">Class绑定</view>
	<view class="box" :class="isActive ? 'active':''">Class绑定</view>
	
	<view class="box" :style="{width: '300px',height:260+'px',fontSize:Size+'px'}">内联样式</view>
</template>

<script setup>
	import { ref } from 'vue';
	const isActive = ref(false);
	const Size = ref(30);
	let i = 0;
	
	let intervalID = setInterval(()=>{
		i++;
		Size.value += i;
		isActive.value = !isActive.value;
		console.log(i);
		if (i == 5) {
			clearInterval(intervalID);
		}
	},1200);
	
</script>

<style lang="scss">
.box{
	width: 200rpx;
	height: 200rpx;
	background: yellow;
	font-size: 20px;
}
.active{
	background: green;
	color: #fff;
}
</style>
